import { FC, useRef, useState } from "react";
import { AlertDefaultProps, AlertProps } from "./interface";
import classNames from "classnames";

const Alert: FC<AlertProps> = (props) => {

    const { message, description, className, closable, type } = { ...AlertDefaultProps, ...props };

    const [showComponent, setShowComponent] = useState(true);

    const containerClass = classNames('alert', className, { [`alert-${type}`]: type });

    const titleClass = classNames('title', {'bold-title': description});

    

    if (!showComponent) {
        return null;
    }

    return (
        <div className={containerClass}>
            <header>
                <div className={titleClass}>{message}</div>
                {closable && <span className="close" onClick={() => setShowComponent(false)}>×</span>}
            </header>
            {description && <div className="desc">{description}</div>}
        </div>
    )
}

export default Alert;